<template>
  <div class="wang-editor">
    <!-- <p>1、将头部和编辑的区域不分开的富文本编辑器</p> -->
    <div v-if="isSeparateHeadBody">
      <div id="editorToolBar" class="editor-tool-bar" title="文本的头部"></div>
      <div
        id="editorContent"
        class="editor-content"
        title="文本的编辑区域"
      ></div>
    </div>
    <div v-else>
      <div id="editor" class="editor">
        <span>{{ msg }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import wangeditor from "wangeditor";
export default {
  name: "wangeditor",
  props: {
    wangeditorRef: {
    //自定义ref
      type: String,
      default() {
        return "wangeditor";
      },
    },
    msg: {
    ////富文本编辑器中默认初始化的内容
      type: String,
      default() {
        return "";
      },
    },
    isSeparateHeadBody: {
    //是否将头部和编辑的区域分开的富文本编辑器
      type: Boolean,
      default() {
        return false;
      },
    },
    menus: {
    //编辑器头部的操作功能菜单
      type: Array,
      default() {
        return [
          "head", // 标题
          "bold", // 粗体
          "fontSize", // 字号
          "fontName", // 字体
          "italic", // 斜体
          "underline", // 下划线
          "strikeThrough", // 删除线
          "foreColor", // 文字颜色
          "backColor", // 背景颜色
          "link", // 插入链接
          "list", // 列表
          "justify", // 对齐方式
          "quote", // 引用
          "emoticon", // 表情
          "image", // 插入图片
          "table", // 表格
          "video", // 插入视频
          "code", // 插入代码
          "undo", // 撤销
          "redo", // 重复
        ];
      },
    },
    height: {
    //编辑器高度，不将头部和编辑的区域分开时有效
      type: Number,
      default() {
        return 300;
      },
    },
    onchangeTimeout: {
    //编辑内容改变的函数的时间等待
      type: Number,
      default() {
        return 1000;
      },
    },
    zIndex: {
    //同时改变头部和编辑区的z-index
      type: Number,
      default() {
        return 100000;
      },
    },
    pasteFilterStyle: {
    //是否去除粘贴文本时自带的样式
      type: Boolean,
      default() {
        return false;
      },
    },
    pasteIgnoreImg: {
    //是否去除除粘贴时自带的图片
      type: Boolean,
      default() {
        return true;
      },
    },
    colors: {
    //自定义配置颜色（字体颜色、背景色）
      type: Array,
      default() {
        return [
          "#000000",
          "#eeece0",
          "#1c487f",
          "#4d80bf",
          "#c24f4a",
          "#8baa4a",
          "#7b5ba1",
          "#46acc8",
          "#f9963b",
          "#ffffff",
        ];
      },
    },
    isContenteditable: {
    //是否开启编辑功能
      type: Boolean,
      default() {
        return true;
      },
    },
    which: {
      //第几组编辑器
      type: [String, Number],
      default() {
        return 1;
      },
    },
  },
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    this.createEditor();
  },
  methods: {
    createEditor() {
    //创建富文本编辑器
      if (this.isSeparateHeadBody) {
        this.editor = new wangeditor("#editorToolBar", "#editorContent");
      } else {
        this.editor = new wangeditor("#editor");
      }
      // console.log(this.editor.config)
      this.editor.config.menus = this.menus;
      this.editor.config.onchangeTimeout = this.onchangeTimeout;
      this.editor.config.zIndex = this.zIndex;
      this.editor.config.pasteFilterStyle = this.pasteFilterStyle;
      this.editor.config.pasteIgnoreImg = this.pasteIgnoreImg;
      this.editor.config.colors = this.colors;
      this.editor.config.height = this.height;
      this.editor.config.onfocus = this.focusEditor;
      this.editor.config.onblur = this.blurEditor;
      this.editor.config.onchange = this.changeEditor;
      this.editor.config.pasteTextHandle = this.pasteTextHandleEditor;
      this.editor.config.linkImgCallback = this.linkImgEditor;
      this.editor.config.linkCheck = this.linkCheckEditor;
      this.editor.config.linkImgCheck = this.linkImgCheckEditor;
      this.editor.create();
      this.editor.$textElem.attr("contenteditable", this.isContenteditable); //开启编辑功能
    },
    linkCheckEditor(text, link) {
    //插入链接的校验
      console.log(text); // 插入的文字
      console.log(link); // 插入的链接
      return true; // 返回 true 表示校验成功
      // return '验证失败' // 返回字符串，即校验失败的提示信息
    },
    linkImgCheckEditor(text, link) {
    //插入图片的校验
      console.log(src); // 图片的链接
      return true; // 返回 true 表示校验成功
      // return '验证失败' // 返回字符串，即校验失败的提示信息
    },
    linkImgEditor(url) {
    //插入图片的回调
      console.log(url); // url 即插入图片的地址
    },
    pasteTextHandleEditor(content) {
    //粘贴文本时的函数
      this.$emit("pasteTextHandleEditorCallback", content);
      return content;
    },
    changeEditor(html) {
    //编辑内容改变的函数
      this.$emit("changeEditorCallback", html);
    },
    focusEditor() {
    //编辑器获得焦点
      this.$emit("focusEditorCallback");
    },
    blurEditor(html) {
    //编辑器失去焦点
      this.$emit("blurEditorCallback", html);
    },
    getEditorContentText() {
    //获取编辑器内，纯文本的所有内容
      return this.editor.txt.text();
    },
    getEditorContentHtml() {
    //获取编辑器内，含有html标签的所有内容
      return this.editor.txt.html();
    },
    setEditorContentHtml(content) {
    //设置文本中的内容
      this.editor.txt.html(content);
    },
    clearEditorContentHtml() {
    //清除文本中的内容
      this.editor.txt.clear();
    },
  },
};
</script>
<style scoped lang="less">
.wang-editor {
  width: 100%;
  height: 100%;
  .editor {
    text-align: left;
  }
  .editor-tool-bar {
    border: 1px solid #ddd;
    background: #ddd;
  }
  .editor-content {
    border: 1px solid #ddd;
    text-align: left;
    min-height: 300px;
  }
}
</style>
